	<!-- Content Background -->
	<div id="content_bg" class="png_bg">
    <!-- Content-->
	<div id="content">
       <br/><br/>
    <!--Container Register -->
    <div align="center">
	<!--Container Panel -->
    <div class="panel" style="width: 50%; padding: 40px 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px">
		<span style="color:black; font-size: 20px;">Discover, read and share with readers and writers</span>
        <!--Signup Form -->
		<div id="signup_table" >
			<table style="width:82%;">
			 	<?=form_open('member/user/do_register','name="signup_form" id="signup_form" enctype="multipart/form-data"')?>	
					<input type="hidden" name="referral" value="" />
				        <!-- error label-->
                        <tr> 
                            <td align="center"><span class="error"><?=$this->session->flashdata('validation_errors');?></span></td> 
                        </tr>
                        <!-- error label-->
                        <tr>  
						  <td align="left">
                            <!-- Username Label -->				
                            <b><?=lang('username')?></b><br/>
							<?=form_input('mtb_username','','id="mtb_username" class="inputSignup" title="'.lang('mess_unique').','.lang('mess_6-20').','.lang('mess_sensitive').'" tabindex="10" maxlength="128" ')?> <br/>
							<!-- Username Label -->
                            
                            <!-- Email Label -->
                            <br/><b><?=lang('email')?></b><br/>
							<?=form_input('mtb_email','','id="mtb_email" class="inputSignup" title="'.lang('mess_valid_email').'.'.lang('mess_active_email').','.lang('mess_sensitive').'" tabindex="20" maxlength="128" ')?> <br/>
							<br/>
							<br/>
							<span id="unsupported_email_msg" class="small" style="color:#FF0000; display:none;">
								<?=lang('mess_email_service')?>
								<br />
							</span>
                            <!-- Email Label -->
                            
                            <!-- Password Label -->
							<div style="float:left;font-weight:bold; width:48%;"><?=lang('password')?></div>
							<br clear="all" />
								<?=form_password('mtb_password','','id="mtb_password" class="inputSignup password"  tabindex="30" maxlength="20" style="float: left;width:45%" ')?> 
							<br />
							<br />
                            <!-- Password Label -->
                            
                            <!-- Birthday Label -->
							 <br />
							 <div style="float:left;font-weight:bold; width:50%;padding-top: 8px;"><?=lang('birthdate')?></div>
                            <!-- Birthday Label -->
							
                            <!-- Gender Label -->
							<div style="font-weight:bold;padding-top: 8px;"><?=lang('gender')?></div>
                            <!-- Gender Label -->
							
                            <!-- Birthday Input -->
							<div style="float:left;width:50%;">
								<?=form_input('birthdate','','style="width:90%" id="birthdate" class="inputSignup" tabindex="40" maxlength="10" ')?> <br/>
							</div>
							<!-- Birthday Input -->
                            
                            <!-- Gender Selected -->
								<?=form_dropdown('gender',config('gender'),'','style="width:49%;padding-bottom:6px" id="gender" tabindex="50" class="inputSignup"')?>
                            <!-- Gender Selected -->    
							<br/>
							<br/>
							<br/>
                            <!-- Agree Label --> 
							<div style="text-align: center;">
								 <?=form_checkbox('mtb_terms','1','id="mtb_terms" checked="unchecked" tabindex="60"')?>
							     <label for="mtb_terms"><?=lang('agree')?> <a href="<?=site_url('page/user/terms')?>" target="_new"><?=lang('term_use')?></a> for Wattpad. <?=lang('mess_join13')?>.</label>
							</div>
                            <!-- Agree Label -->
						</td>
					</tr>
                    <!--Submit Button -->
					<tr>
						<td align="center">
							<h3 id="signup_spinner" style="height: 23px; display: none;padding: 9px;margin: 10px"><?=lang('sign_upup')?>... <img src='images/ajax-loader-white.gif'  alt='ajax-loader-white.gif'  /></h3>
							<?=form_submit('submitButton',lang('sign_up').'!','style="width:55%" id="signup_button" tabindex="70" class="b2 orange"')?>
							<br/>
						</td>
					</tr>
                    <!--Submit Button -->
				<?=form_close()?>
			</table>
		  </div>
          <!--Signup Form -->
	</div>
    <!--Container Panel -->
    </div>
    <!--Container Register -->
	<!--Bottom Banner --><div id="ad_bottom_banner" style="clear:both;text-align:center;padding-bottom:10px"></div><!--Bottom Banner -->	
  </div>
 <!-- End Content-->

<!-- Content Bottom--> 
<div id="content_bottom" class="png_bg"></div>
<!-- Content Bottom-->

<!-- Script-->
<script src='js/password_strength_plugin.js' type='text/javascript'></script>
<script src='js/jquery.tipsy.js' type='text/javascript'></script>
<script type="text/javascript">
	$(document).ready(function () {
		// initialize the datepicker
		$("#birthdate").datepicker({
			dateFormat: 'mm-dd-yy',
			changeMonth: true,
			changeYear: true,
			defaultDate: "mm-dd-yyyy",
			showAnim: 'fadeIn',
			yearRange: '1900:+00',
			maxDate: new Date()
		});

		//initialize the password strength meter
		$(".password").passStrength({
			userid: "#mtb_username"
		});

		$('#signup_form').submit(function () {
			$('#signup_button, #signup_spinner').toggle();
			return true;
		});

		$('#email_signup').click(function () {
			$('#email_signup_container').css('visibility', 'hidden');
			$('#signup_table').slideDown('slow');
			$('#mtb_username').tipsy({gravity: 'w', trigger: 'focus'});
			$('#mtb_email').tipsy({gravity: 'w', trigger: 'focus'});
			setTimeout(function () {
				$('#mtb_username').focus();	//need to delay focus event for the duration of the slidedown animation (600ms) or the slidedown will be strange
			}, 600);
			return false;
		});
	});

		window.onload = $('#email_signup').click();
</script>
<!-- Script-->